<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>兼容ie8等 + 手机样式</title>
	 <!-- 作者 -->
    <meta name="author" content="author">
    <!-- 网页描述 -->
    <meta name="description" content="hello">
    <!-- 关键字使用","分隔 -->
    <meta name="keywords" content="a,b,c">
    <!-- 禁止浏览器从本地机的缓存中调阅页面内容 -->
    <meta http-equiv="Pragma" content="no-cache">
    <!-- 用来防止别人在框架里调用你的页面 -->
    <meta http-equiv="Window-target" content="_top">
    <!-- content的参数有all，none，index，noindex，follow，nofollow，默认是all -->
    <meta name="robots" content="none">
    <!-- 收藏图标 -->
    <link rel="Shortcut Icon" href="favicon.ico">
    <!-- 网页不会被缓存 -->
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <!-- 解决部分兼容性问题，如果安装了GCF，则使用GCF来渲染页面，如果未安装GCF，则使用最高版本的IE内核进行渲染。 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <!-- 页面按原比例显示，禁用缩放 -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

	<link rel="stylesheet" href="vendor/bootstrap-3.3.7/css/bootstrap.min.css">

	<link rel="stylesheet" href="assets/css/common.css">

	<style>
		.ie8-fixed {
			behavior: url(/vendor/ie-fix/pie.htc);
		}
		.block {
			width: 100px;
			height: 100px;
			margin-bottom: 15px;
		}
		.round {
			border: solid 1px red;
			border-radius: 20px;
			position: relative;
		}
		.part-round {
			border: solid 1px red;
			border-radius: 20px 0 20px 0;
			position: relative;
		}
	</style>

	<!-- 必须先引用bs.css，然后再引用respond.js，必须有服务器环境 -->
	<!--[if lt IE 9]>
		<script src="vendor/ie-fix/html5shiv.min.js"></script>
		<script src="vendor/ie-fix/respond.min.js"></script>
	<![endif]-->

	<!--[if lt IE 10]>
        <script type="text/javascript"src="vendor/ie-fix/placeholder.js" charset="utf-8"></script>
    <![endif]-->
</head>
<body>
	<!-- 菜单占位 -->
	<div id="menu"></div>

	<div class="container">
		<h2>浏览器兼容性的一些问题 <small>(主要是ie8、手机端之类的)</small></h2>

		<br>
		
		<div class="container-fluid container-fullw">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h4 class="panel-title">
						解决兼容性问题的meta标签
					</h4>
				</div>
				<div class="panel-body">
					<h5>手机页面的宽度1:1调整，禁用用户缩放</h5>
					<pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;</pre>
					<br>
					<h5>解决部分兼容性问题，如果安装了GCF，则使用GCF来渲染页面，如果未安装GCF，则使用最高版本的IE内核进行渲染。</h5>
					<pre>&lt;meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" /&gt;</pre>
				</div>
				<div class="panel-footer">兼容性：<strong>ALL</strong></div>
			</div>

			<div class="panel panel-primary">
				<div class="panel-heading">
					<h4 class="panel-title">
						支持媒体查询、识别html5的标签
					</h4>
				</div>
				<div class="panel-body">
					<h5>respond.js</h5>
					<p>为了使IE8支持媒体查询，以实现bootstrap的响应式布局，需要使用respond.js</p>
					<p>使用respond.js的要点：</p>
					<ul>
						<li>查看页面时必须有服务器环境，比如nodeJS的http-server</li>
						<li>respond.js越早引入越好，但是要在css之后引入。（越早引入越好，在ie下面看到页面闪屏的概率就越低，因为最初css会先渲染出来，如果respond.js加载得很后面，这时重新根据media query解析出来的css会再改变一次页面的布局等，所以看起来有闪屏的现象）</li>
						<li>注意自定义样式，定义宽度的时候，在IE8优先使用不带媒体查询的，所以需要把自定义样式报在媒体查询中，否则会覆盖使媒体查询失效</li>
					</ul>
					<br>

					<h5>html5shiv.js</h5>
					<p>解决IE9以下浏览器不会识别html5的标签的问题</p>
					<br>

					<h5>&lt;!--[if lt IE 9]&gt;...&lt;![endif]--&gt;的作用</h5>
					<p>以上标签只有ie会识别，lt=less than=小于，所以if条件为：当浏览器小于ie9（不含）时。</p>
					<p>可以使用此标签针对ie8做特殊优化和引用</p>
					<br>

					<pre>&lt;!--[if lt IE 9]&gt;
    &lt;script src="vendor/ie-fix/html5shiv.min.js"&gt;&lt;/script&gt;
    &lt;script src="vendor/ie-fix/respond.min.js"&gt;&lt;/script&gt;
&lt;![endif]--&gt;</pre>
				</div>
				<div class="panel-footer">兼容性：<strong>IE8</strong> (其他未测试)</div>
			</div>

			<div class="panel panel-primary">
				<div class="panel-heading">
					<h4 class="panel-title">
						圆角问题
					</h4>
				</div>
				<div class="panel-body">
					<p>使用pie.htc第一版，版本号可在htc文件中查看。使用要点：</p>
					<ul>
						<li>pie文件路径是相对于当前html页面的，而不是针对css的</li>
						<li>position: relative是为了解决有背景颜色的时候，border圆角失效的bug</li>
					</ul>
					<br>
					<h5>全部圆角</h5>
					<div class="row">
						<div class="col-sm-6 col-md-5 col-md-offset-1">
							<div class="block round"></div>
							<pre>.round {
    border: solid 1px red;
    border-radius: 20px;
    position: relative;
}</pre>
						</div>
						<div class="col-sm-6 col-md-5">
							<div class="block round ie8-fixed"></div>
							<pre>.round.ie8-fixed {
    border: solid 1px red;
    border-radius: 20px;
    position: relative;
    behavior: url(/vendor/ie-fix/pie.htc);
}</pre>
						</div>
					</div>
					<br>

					<h5>局部圆角</h5>
					<div class="row">
						<div class="col-sm-6 col-md-5 col-md-offset-1">
							<div class="block part-round"></div>
							<pre>.part-round {
    border: solid 1px red;
    border-radius: 20px 0 20px 0;
    position: relative;
}</pre>
						</div>
						<div class="col-sm-6 col-md-5">
							<div class="block part-round ie8-fixed"></div>
							<pre>.part-round.ie8-fixed {
    border: solid 1px red;
    border-radius: 20px 0 20px 0;
    position: relative;
    behavior: url(/vendor/ie-fix/pie.htc);
}</pre>
						</div>
					</div>
				</div>
				<div class="panel-footer">
					兼容性：<strong>IE8以上，不完美支持</strong>
				</div>
			</div>

			<div class="panel panel-primary">
				<div class="panel-heading">
					<h4 class="panel-title">
						placeholder
					</h4>
				</div>
				<div class="panel-body">
					<p>以下是一种方法，在IE上打开查看效果，需要注意的是，原插件对浮动元素定位(left)不太准确，已hack代码，包括字体颜色之类的都在插件中写死，可以尝试重新封装该插件，提供渲染参数，或者使用父类的css样式。</p>
					<p>另外需要注意，该方法不支持响应式，应重新想一个别的办法，类似input[type=money]的方法</p>
					<p><strong style="color: red;">不支持响应式，不建议使用</strong></p>
					<div class="row form-group" title="气泡：请输入文本">
						<label class="form-control-static col-sm-2">
							<span class="pull-right">文本框</span>
						</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" placeholder="请输入文本">
						</div>
					</div>

					<div class="row form-group" title="气泡：请输入文本">
						<label class="form-control-static col-sm-2">
							<span class="pull-right">多行文本</span>
						</label>
						<div class="col-sm-4">
							<textarea class="form-control" placeholder="请输入文本" rows="3" style="resize: none;"></textarea>
						</div>
					</div>

					<pre>&lt;!--[if lt IE 10]&gt;
    &lt;script type="text/javascript"src="vendor/ie-fix/placeholder.js" charset="utf-8"&gt;&lt;/script&gt;
&lt;![endif]--&gt;</pre>
				</div>
				<div class="panel-footer">兼容性：<strong>IE8</strong> (其他未测试) <strong style="color: red;">不支持响应式</strong></div>
			</div>


			<div class="panel panel-primary">
				<div class="panel-heading">
					<h4 class="panel-title">
						解决ajax跨域报错No transport的错误
					</h4>
				</div>
				<div class="panel-body">
					<h5><a href="https://www.cnblogs.com/fayin/p/6599104.html">&gt;&gt;&gt;[转]</a>【bug】—— IE8 ajax 报错：no transport</h5>
					<p>如题，我使用<code>$.ajax()</code>方法请求数据，在现代浏览器中工作正常，但在 IE 8 下，会有报错：no transport</p>
					<p>从 stackoverflow 中获知，出现这个问题是因为** IE 8 不支持 Cross Origin Resorece Share XHR**请求，所以不能通过原生的 XHR 或者 $.ajax()去跨域请求数据。</p>
					<p>IE 8 实现了自己的一套方法：XDomainRequest。</p>
					<p>于是我尝试google——“jquery 兼容 IE 8 XDomainRequest”,找到了一个插件：jquery.xdomainrequest.min.js，点击<a href="/vendor/ie-fix/jquery.xdomainrequest.min.js" download="jquery.xdomainrequest.min.js">下载</a>，直接引用在页面内就解决问题了（只支持IE8、IE9）。</p>
					<pre>&lt;!--[if lt IE 9]&gt;
    &lt;script src="vendor/ie-fix/jquery.xdomainrequest.min.js"&gt;&lt;/script&gt;
&lt;![endif]--&gt;</pre>
				</div>
				<div class="panel-footer">兼容性：<strong>IE8</strong> (其他未测试)</div>
			</div>


			<div class="panel panel-primary">
				<div class="panel-heading">
					<h4 class="panel-title">
						示例标题
					</h4>
				</div>
				<div class="panel-body">
					<h5>示例标题</h5>
					<p>示例内容示例内容示例内容示例内容</p>
					<pre>console.log('示例代码');</pre>
					<br>
					<p>示例内容</p>
					<pre>console.log('示例代码');</pre>
				</div>
				<div class="panel-footer">兼容性：<strong>ALL</strong></div>
			</div>

			<!-- <div class="panel panel-primary">
				<div class="panel-heading">
					<h4 class="panel-title">
						示例标题
					</h4>
				</div>
				<div class="panel-body">
					示例内容
					<pre>console.log('示例代码');</pre>
				</div>
			</div> -->

		</div><!-- END OF .container-fluid -->

	</div><!-- END OF .container -->

	<script src="vendor/jquery-1.12.4/jquery.min.js"></script>
	<script src="vendor/bootstrap-3.3.7/js/bootstrap.min.js"></script>

	<script src="assets/js/common.js"></script>

	<script>
		// 初始化
		function init() {

		}
	</script>
</body>
</html>